CSS3

text::JavaScript

CSS教程

CSS组件网站：

All | NavNav+

Explore 3000+ Free UI Elements: CSS & Tailwind (uiverse.io)

CSS Generators: Your CSS code with less effort (css-generators.com)

一、基础

1 基本语法

css声明要以分号结尾，声明要用{}括起。

一行写一个声明。

如果属性值是多单词组成，要加上引号。

/*选择器名 { 属性 : 属性值 ; ... }*/
div { background-color: red; }

/* label.calss：标签下的类 */

2 基本使用

link和import区别

代码嵌入方式：

行内式：定义在标签中。

嵌入式：开辟一段属于css的代码，通常在<head>中嵌套，之后再在body中使用该标签会有对应的属性。

引入外联样式文件：先定义好再直接引用。新建css文件——选择器，例：p {color:red;}。

优先级：样式代码距离应用代码的距离，越近越先执行。

/*1.行内式*/
<p style=" ... " ></p>

/*2.嵌入式*/
<style type="text/css"> p{color:blue;font-size:40px;} </style>

/*3.引入外联样式文件（rel：当前文件与引入的文件之间的关系）*/
<link rel="stylesheet" type="text/css" href="css/*.css（路径）" />

二、选择器

1 基本选择器

/*通用选择器*/
* { name:value; }

/*元素选择器*/
label { name:value; }

/*id选择器*/
#id { name:value; }

/*类选择器*/
.class { name:value; }

/*组合选择器（或运算）*/
selector1,selector2, ... { name:value; }

/*属性选择器*/
label[ title ] ... {} /*有title的标签*/
lable[ title=value ] /*具体值匹配（标签中加上 title 属性）*/
label[ title ^= t ] /*以 t 开头的 title*/
label[ title $= 0] /*以 0 结尾的 title*/

/*优先级（权重）：!important(max) > style(1000)> id(100) > class(10) > label(1) > * */
/*!important要写在分号前,优先级最高*/
p{color:red!important; }

2 组合选择器

/*后代选择器（派生选择器）：选择指定元素的所有后代元素（空格分割）*/
selector1/label   selector2/label { name:value; }

/*子代选择器：选择指定元素的第一代元素*/
selector1/label > selector2/label { name:value; }

/*相邻兄弟选择器：选择指定元素的相邻的下一个元素（只向下找紧连一个）*/
selector1/label + selector2/label  { name:value; }

/*普通兄弟选择器：选择指定元素后的指定同级元素（只会向下找）*/
selector1/label ~ selector2/label  { name:value; }

/* 同一个类带空格的类名，直接点即可 */
<div class="card mb-3">
.card.mb-3{}

三、常用属性

1 伪类

/*得到焦点的控件的样式*/
label:focus {}
/*鼠标悬停的控件的样式*/
label:hover {}

/*文本前 / 后加文本*/
label::before / after { content: "str" }

2 background

渐变色：linear-gradient()

/*背景颜色。value：color，transparent（透明的），rgba(0,0,0,0)*/
background-color:value;

/*背景图片 （默认重复显示）*/
background-image: url( url );

/*背景图片重复。value：no-repeat;repeat-x;repeat-y;repeat;*/
background-repeat:value;

/*背景图片大小。size：lengthpx widthpx*/
background-size:size;

/*背景图片滚动。balue：Scroll，Fixed(背景固定)*/
background-attachment:value;

/*背景图片初始位置。value：n%、num、top、left、right、bottom、center*/
background-position:value;

/*合集（可填之前所有属性值）*/
background:value;

3 text

/*文本颜色。value：同 html 的 text，两字符相同可缩写，例：# ff0000 = #f00*/
color:value;

/*文本首行缩进。value：num em;（1em：1字符）*/
text-indent:value;

/*文本对齐*/
text-align:value;

/*单词间距（分词，仅英文）*/
word-spacing:size;
/*字母间距（分字，中英皆可）*/
letter-spacing:size;

/*文本装饰。value：overline;underline;line-through;none;blink;（设置多值中间用空格隔开）*/
text-decoration:value;

/*设置行高（可以用来垂直居中）*/
line-height:size;
/*垂直对齐。value：baseline、top、bottom、middle*/
vertical-align:value;

/*文本阴影 offset-x | offset-y | blur-radius | color */
text-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);
/*盒子阴影 x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow:2px 2px 1px rgba(0, 0, 0, 0.2);

4 font

official::Font Awesome

阿里巴巴图标库

/*字体效果（字体尽量用图片显示）*/
font-family:value;
/*value：带空格的单词应带上引号。多值中间用逗号隔开，当不识别第一个字体时会自动识别后续字体。*/
/*下载 icon*/
@font-face{ 
    font-family:'iconfont';
    src:url('url'); 
    format('truetype'); }

/*字体大小*/
font-size:size;

/*字体风格.value：normal;italic（斜体）;oblique（强制倾斜）;*/
font-style:value;

/*字体粗细.value：100~900（越大越粗），bold（粗体，700），400（正常字体）*/
font-weight:value;

5 list

/*表头图标（图标一般用此实现）*/
list-style-image: url("url");

/*图标位置。value：inside，outside（图标在文本行内，外）*/
list-style-position: value;

/*图标类型。同 ul 的 type*/
list-style-type: value;

/*合集*/
list-style: value;

6 display

/*规定元素生成框的类型*/
display: value;
block：元素会被显示，且元素会变成块级元素，元素前后会有换行符。
none：元素会被隐藏。（脱离文档流）
inline：元素会显示为行内元素，元素前后没有换行符。
inline-block：行内块级元素。
flex：弹性布局，设置于父元素，子元素会按格式显示，格式设置如下：
/*垂直居中*/
align-items: center;
/*水平居中*/
justify-content: center;

/*文档可见（不脱离文档流）*/
visibility:visable / hidden;

7 float

只有横向浮动、没有纵向浮动。

会将元素的display属性变更为block。

浮动元素的后一个元素围绕着浮动元素。（典型运用是文字围绕图片）

浮动元素的前一个元素不会受到任何影响。（如何你想让两个块级元素并排显示，两个元素都应该有float属性）

/*浮动，脱离文档流，多用于横向排列场景 value：none、left、right*/
float:value;

/*清除浮动（移动自己） value：left、right、both。*/
clear:value;

四、盒子模型

1 尺寸

W3C：宽高是蛋黄大小——content-box

Microsoft：宽高是蛋壳大小——border-box

默认W3C标准，修改：box-sizing : border-box ;

/*宽，最小宽，最大宽*/
width，min-width，max-width：
/*高，最小高，最大高*/
height，min-height，max-height

/*溢出，x轴溢出，y轴溢出，文本溢出*/
overflow / overflow-x / overflow-y / text-overflow:value; 
/*value：visible（可见，默认），hidden（隐藏），scroll（滚动条），auto（必要时加滚动条），clip（裁剪），ellipsis（省略号）*/

2 定位

w3c定位

relative：

定位点：原点。

不脱离文档流。

relative应用：

一个容器中某个控件位置微调。

配合 absolute 。

absolute：

定位点：body，祖先是 relative 定位点则为祖先。

脱离文档流。

定位方式：position : value ;
（value：static（静态，默认），relative（相对），fixed（固定），absolute（绝对））

位置：top，right，bottom，left

形状：clip : rect (top, right, bottom, left) ;

/*移动*/
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);


/*absolute 堆叠顺序*/
z-index:value;
/*value：num（正数离用户近，负数离用户远。谁大谁在上面）*/

3 margin

外边距：边框到外部的距离。

可设置多个元素，1：全部，2：上下左右 3：上左右下 4：上右下左。

/*统一设置。value：auto（居中）*/
margin:value;

/*单独设置*/
margin-left
margin-right
margin-top
margin-bottom

4 border

边框：边框样式。

border-radius

/*统一设置*/
border:width color style;

/*单个设置（可设置多个元素，1：全部，2：上下 左右 3：上 左右 下 4：上 右 下 左）*/
border-top
border-bottom
border-left
border-right

/*边框样式*/
border-style:value;
/*value：none（无边框），dotted（点线），dashed（虚线），solid（实线），double（双边框），groove（3D沟槽）， ridge（3D脊边框）， inset（3D嵌入），outset（3D突出）*/

border-color:value;
border-width:value;

/*合并边框。value：collapse（合并），separate（默认，独立）*/
border-collapse:value;

/*圆角边框*/
border-radius:value;

5 outline

轮廓：和border很类似，但有如下区别：

outline 不占据空间，绘制于元素内容周围。

根据规范，outline 通常是矩形，但也可以是非矩形的。

outline

6 padding

内边距：内容到边框的内距。

可设置多个元素，1：全部，2：上下左右 3：上左右下 4：上右下左。

/*统一设置*/
padding:value;

/*单独设置*/
padding-left
padding-right
padding-top
padding-bottom

五、技巧

1 清空默认

/*清空默认边距*/
1. *{ margin: 0;padding: 0; }
2. reset.css

/*清空超链接样式*/
a { text-decoration: none; } /*普通*/
a:link { text-decoration: none; } /*未访问*/
a:visited { text-decoration: none; } /*已访问*/
a:hover { text-decoration: none; } /*鼠标停留*/
a:active { text-decoration: none; } /*正在点击*/

2 整体布局

分块：

一般可以将页面分成 12 列，盒子占位为 n 列。

width：设置最大为（width-20px）或（100%）（垂直滚动条占20px）

width：一般设置为一定大小（例：设置 960px ，页面为 1024px）

盒子布局：

套盒子：盒子中套盒子便于后期加减内容和板块移动。（例：container 中套 header，content 和 footer盒子，然后header盒子中又可以进行嵌套）

/* 登录框恒居页面中央 */
.login_page{
    position: absolute;
    top:50%;
    left:50%;
    width: 960px;
	height: 560px;
    margin-left: -480px; /*调节如下两个属性来改变位置*/
    margin-top: -280px;
	overflow: hidden;
}

/* 侧边栏设置 */
float: left;
width: num px;

/* 侧边栏内容设置 */
width: calc( 100% - num px );
margin-left: num px;

/* 顶端栏置顶设置*/
.header
{
    position: fixed;
    height: 45px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background-color: #354498; 
}

3 盒子内容

/* 文本居中 */
/* 横向 */
text-align: center;
/* 纵向（设置后文本会自动居中） */
line-height : num px;

/* 盒子居中（自适应居中） */
margin: 0 auto; 

/* 盒子重叠（设置color透明化） */
color: rgba( , , ,0.5);


/* 撑起盒子（容器中的盒子如果浮动会脱离容器） */
/* 1.盒子尾部加一个盒子，然后设置清除浮动 */
clear: left;
/* 2.盒子尾部加一个 */ 
p::after
/* 3.盒子溢出隐藏（缺点：有元素在容器之外将无法被显示） */
container { overflow: hidden; }


/* 图片盒子（用<h2>等标签替代<img>，然后设置背景，去掉文字）
去掉文字的两种方法 （方法一可能会被浏览器忽略导致不解析）*/
font-size: 0px;
text-indent: -9999px;


/* 两个一起用进行换行 */
/* 保留空白符（空格、制表符等），但是允许文本换行。 */
white-space: pre-wrap;
/* 在单词内部换行，以避免单词溢出容器边界。 */
word-wrap: break-word;

4 函数

/* 计算式 */
calc(exp)
calc(100% - 20px)